<template>
	<view>
		<page-head headTitle="申请退款" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9">
			<view class="flex p-t-b3 order-lr">
				<image :src="goodsInfo.image" alt="商品名" class="order-pic" mode="widthFix">
				<view class="ml-2 flex-1 m-t3">
					<view class="flex justify-between align-center">
						<text class="trade-name">{{goodsInfo.name}}</text>
						<text class="fs-24">￥{{goodsInfo.price}}</text>
					</view>
					<text class="flex justify-end input-goods line-height">x{{goodsInfo.qty}}</text>
				</view>
			</view>
			<border></border>
			<view class="m-t4 p-l3">
				<text class="fs-3 font-weight">选择退款原因</text>
				<radio-group @change="radioChange">
					<label class="flex align-center justify-between search-h" v-for="(item, index) in items" :key="item.value">
						<view class="color-table">{{item.name}}</view>
						<view>
							<radio class="radio" :value="item.value" :checked="index === current" color="#ffeb0f"/>
						</view>
						
					</label>
				</radio-group>
			</view>
		</view>
		<view class="fixed fixed-bottom bg-white">
			<bright-button title="提交"></bright-button>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import border from '@/components/common/border.vue'
import brightButton from '@/components/common/bright-button.vue'
	export default {
		components:{
			pageHead,
			border,
			brightButton
		},
		data() {
			return {
				items: [{
							value: '1',
							name: '商家评价不好'
						},
						{
							value: '2',
							name: '买多了，买错了',
							checked: 'true'
						},
						{
							value: '3',
							name: '计划有变，无时间消费'
						},
						{
							value: '4',
							name: '商家缺货'
						},
						{
							value: '5',
							name: '商家营业但是不接待'
						},
						{
							value: '6',
							name: '线下门店更优惠'
						},
					],
					current: 0,
					orderInfo: '',
					goodsInfo:'',
			}
		},
		onLoad(e) {
			this.orderSn = e.sn;
			this.getInfo();
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			getInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/order/refund',
					data:{
						sn:this.orderSn
					},
				}).then(res=>{
					if(res.data.code == 1){
						this.orderInfo = res.data.data.order;
						this.goodsInfo = res.data.data.goods
					}
				});
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

<style scoped>
page{background-color: #FFFFFF;}
</style>
